<template>
    <div class="container">
        <el-row>
            <el-col :span="10">
                <h2>选择班级</h2>
                <el-cascader :options="classList" style="width: 350px;" placeholder="请选择班级"></el-cascader>
            </el-col>
            <el-col :span="14">
                <h2>选择题目</h2>
                <el-cascader :props="props" :options="problemList" style="width: 550px;"
                    placeholder="请选择题目"></el-cascader>
            </el-col>
        </el-row>

        <h2>题目要求</h2>
        <el-input v-model="problemRequirement" style="width: 985px;" :rows="7" type="textarea" resize="none"
            placeholder="请输入题目要求" />

        <h2>时间设置</h2>
        <el-date-picker v-model="timeSet" style="width: 985px;" type="datetimerange" start-placeholder="开始时间"
            end-placeholder="截止时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />

        <el-row style="margin-top: 40px;">
            <el-col :offset="19" :span="2">
                <el-button style="width: 75px;" type="primary" plain>
                    重置
                </el-button>
            </el-col>
            <el-col :span="2">
                <el-button style="width: 75px;" type="primary">
                    发布
                </el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const props = { multiple: "true" }
const problemRequirement = ref()
const timeSet = ref()

const classList = [
    {
        value: '计算机技术与科学',
        label: '计算机技术与科学',
        children: [
            {
                value: '计算机技术与科学1班',
                label: '计算机技术与科学1班',
            },
            {
                value: '计算机技术与科学2班',
                label: '计算机技术与科学2班',
            },
        ]
    },
    {
        value: '软件工程',
        label: '软件工程',
        children: [
            {
                value: '软件工程1班',
                label: '软件工程1班',
            },
            {
                value: '软件工程2班',
                label: '软件工程2班',
            },
        ]
    },
]

const problemList = [
    {
        value: 'array',
        label: '数组',
        children: [
            {
                value: 'two-sum',
                label: '两数之和',
            },
            {
                value: 'three-sum',
                label: '三数之和',
            },
        ]
    },
    {
        value: 'string',
        label: '字符串',
        children: [
            {
                value: 'integer-to-roman',
                label: '整数转罗马数字',
            },
            {
                value: 'roman-to-integer',
                label: '罗马数字转整数',
            },
        ]
    },
]
</script>

<style scoped>
.container {
    padding: 20px 100px;
}
</style>